iT邦幫忙

2022 iThome 鐵人賽

DAY 25
0
Modern Web

你 React 了嗎? 30 天解鎖 React 技能系列 第 25

[DAY 25] 串接 API,透過 Fetch 將遠端資料渲染在畫面

  • 分享至 

  • xImage
  •  

cover

串接 API 的方式有很多種,你可以使用任何喜歡的 Ajax 函式庫來串接,如 Axios、ky 等等…,這邊將會以 JavaScript 原生方法 Fetch 來串接遠端資料,最後會將資料渲染在畫面上


認識 Fetch API

Fetch 為 ES6 取得遠端資料的原生方法,並以 Promise 物件來作回應,Promise 物件生成後,可以用 Promise 的原型方法來執行取得的結果,一開始會先得到一個 ReadableStream 物件,需透過 json() 轉成可用的資訊,之後就可以取得資料囉!


Fetch API 使用方法

Fetch 基本用法

fetch( requestUrl, {method: "GET"}) // 設定使用 GET
	
// res 為 ReadableStream 的物件,透過 json() 轉成可用的資訊
.then(res => res.json())  

.then(data => {
 // 接到 request data後要做的事情
})
.catch(e => {
 // 發生錯誤
})

Promise 物件

.then() 綁定當 fulfilled 或 rejected 狀態時,分別要執行的函數

.catch() 綁定當 rejected 狀態時,要執行的函數


Fetch 帶入 headers、body

fetch(requestUrl, {
  method: 'POST',
  // headers 加入 json 格式
  headers: {
    'Content-Type': 'application/json'
  },
  // body 將 json 轉字串送出
  body: JSON.stringify(data)
})

.then((response) => {
  return response.json(); 
})

.then(data => {
  console.log(data);
})

.catch((err) => {
  console.log('錯誤:', err);
})

body 所送出的資料必須先轉純字串後才能送出


範例

import { useEffect, useState } from "react";

export default function App() {
  const [state, setState] = useState({});

  const fetchData = () => {
    fetch("https://randomuser.me/api/", { method: "GET" })

      .then((response) => response.json())

      .then((data) => {
        setState(data["results"][0]);
      })

      .catch((err) => {
        console.log(err);
      });
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div className="App">
      <h1>React 熱炒店會員資料</h1>

      <div>
        <img src={state.picture?.large} alt="" />
        姓名:{state.name?.first} <br />
        性別:{state.gender} <br />
        E-mail:{state.email} <br />
      </div>
    </div>
  );
}

我們利用 https://randomuser.me/api/ 隨機產生出會員資料

  • 利用 fetch 做串接
  • 取得 data 後,儲存到 state
  • 渲染畫面

fetch

會員資料就顯示出來啦~~~~

打開 codesandbox 程式碼範例 一起試試看吧!!


結語

利用簡單的 fetch API 串接,將資料渲染到畫面,就可以完成很多事啦!我自己也很習慣用 Axios 做串接 API,大家有興趣也可以去研究看看唷!/images/emoticon/emoticon12.gif


Reference

ReactJS 入門 - 使用 fetchAPI 送出 HTTP 請求
ES6 原生 Fetch 遠端資料方法


本文將同步更新至我的部落格
Lala 的前端大補帖



上一篇
[DAY 24] React-router-dom 路由設定教學,實現頁面跳轉(下)
下一篇
[DAY 26] Redux 原理與 Redux Toolkit
系列文
你 React 了嗎? 30 天解鎖 React 技能30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言